<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							以旧换新
						</view>
						<view class="app-header-right">
							<view class="right">
								<image src="../../static/images/zhang.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="Object.keys(dataInfo).length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="recycling">
				<view class="recycling-header">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in dataInfo.gallery" :key="index">
							<view class="swiper-item">
								<image :src="item.img_url" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="nav-bar">
					<view class="nav-item" v-for="(item,index) in dataInfo.category" :key="index"
						@click="getCategoryItem(item)">
						<image :src="item.img_url" mode=""></image>
					</view>
				</view>
				<view class="nav-bar">
					<view class="nav-item" v-for="(item,index) in dataInfo.category_2" :key="index"
						@click="getCategoryItem(item)">
						<image :src="item.img_url" mode=""></image>
					</view>
				</view>
				<view class="micare-container">
					<view class="box-item el-flex">
						<image class="left-icon"
							src="https://img.youpin.mi-img.com/youpinoper/2128e126_523d_4b9d_baab_7030f9b7cd6b.png"
							mode="">
						</image>
						<view class="text">
							MiCare / 保值换新服务，请点此使用
						</view>
					</view>
					<view class="box-item el-flex">
						<view class="red">
							使用权益
						</view>
						<image src="https://img.youpin.mi-img.com/youpinoper/6a8501c0_111a_402b_afb2_06ac684bc9be.png"
							class="red-icon" mode=""></image>
					</view>
				</view>
				<view class="recycling-main">
					<view class="section">
						<view class="section-title">
							热门回收机型
						</view>
						<view class="section-body">
							<view class="hot-model">
								<view class="hot-model-item" @click="toDeviceInfo(item.id,item.name)"
									v-for="(item,index) in dataInfo.popular_product" :key="index">
									<view class="img-box">
										<LazyLoad :src="item.imageUrl" width='1.66rem' height='1.66rem'></LazyLoad>
									</view>
									<view class="name text-ellipsis">
										{{item.name}}
									</view>
									<view class="price">
										￥{{item.maxPrice}}
									</view>
									<view class="tag">
										最高回收价
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="section">
						<view class="section-title">
							常见问题
							<view class="check-more-tip">
								查看更多
							</view>
						</view>
						<view class="section-body">
							<view class="step-box">
								<view class="step-img">
									<image src="https://m.mi.com/static/img/symbol.d2ca75488f.png" mode="widthFix">
									</image>
								</view>
								<view class="step-text ui-box">
									<view class="ui-box-flex">
										快速估价
									</view>
									<view class="ui-box-flex">
										便捷回收
									</view>
									<view class="ui-box-flex">
										收券购买新机
									</view>
								</view>
							</view>
							<view class="advantage">
								<view class="li">
									免费上门：顺丰快递免费上门取件，范围覆盖全国
								</view>
								<view class="li">
									专业质检：专业服务商检测，公开透明不压价
								</view>
								<view class="li">
									隐私保护：专业数据清除技术，防止隐私泄露
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="action-bar maxW maxF" @click="toModel()">
					<view class="ui-button ui-button-next">
						<text>立即估价</text>
					</view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		components: {
			LazyLoad
		},
		data() {
			return {
				dataInfo: {}
			};
		},
		methods: {
			getCategoryItem(item) {
				if (!item.action.path) return;
				let id = item.action.path.split('tab=')[1]
				let that = this
				uni.navigateTo({
					url: `/secPage/phoneModel/phoneModel?tab=${id}`,
				})
			},
			toModel() {
				uni.navigateTo({
					url: `/secPage/phoneModel/phoneModel`
				})
			},
			toDeviceInfo(id, name) {
				if (id && name) {
					uni.navigateTo({
						url: `/secPage/deviceInfo/deviceInfo?id=${id}&name=${name}`
					})
				}
			},
			Back() {
				uni.navigateBack(-1)
			},
			getRecycling() {
				this.$request.get('/getRecycling').then((res) => {
					this.dataInfo = res.data.data
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad() {
			this.getRecycling()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.header {
		height: .95rem;

		.header-bar {
			height: 100%;
			background-color: rgb(244, 244, 244);

		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;

				.right {
					display: block;
					width: 0.6rem;
					margin: 0 0.2rem;

					image {
						display: block;
						width: 0.6rem;
						height: 0.6rem;
						transform: scale(0.75);
					}
				}

			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);

			}
		}
	}

	.recycling {
		padding-top: .95rem;
		font-family: Arial, Verdana, Sans-serif;
		padding-bottom: 1.2rem;

		/deep/.uni-swiper-wrapper {
			height: 3.6rem;
		}

		.recycling-header {
			position: relative;
			height: 3.6rem;

			.swiper-item {
				width: 375px;
				height: 3.6rem;

				image {
					display: block;
					width: 100%;
					height: auto;
					transform: translate(-50%, -50%);
					position: absolute;
					left: 50%;
					top: 50%;
				}
			}
		}

		.nav-bar {
			display: flex;
			flex-direction: row;

			.nav-item {
				flex: 1;
				position: relative;
				vertical-align: middle;

				image {
					width: 1.44rem;
					height: 1.52rem;
				}
			}
		}

		.micare-container {
			margin-top: 0.24rem;
			margin-left: 0.3rem;
			width: 6.2rem;
			height: 0.64rem;
			background: #edf6ff;
			border-radius: 0.16rem;
			padding: 0 0.24rem;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.box-item {

				.red {
					color: #ff5900;
					font-size: .22rem;
					line-height: .26rem;
				}

				.red-icon {
					margin-left: 0.067rem;
					width: 0.066666666666667rem;
					height: 0.113333333333333rem;
				}

				.left-icon {
					margin-right: 0.09rem;
					width: 0.227rem;
					height: 0.26rem;
				}

				.text {
					font-size: .22rem;
					line-height: .26rem;
					color: #333;
				}
			}
		}

		.recycling-main {
			border-top: 0 solid #f6f3f0;

			.section {
				margin-top: 0.24rem;
				padding: 0 0.32rem;

				.section-title {
					position: relative;
					font-size: .36rem;
					line-height: 3em;
					text-align: left;

					.check-more-tip {
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -0.13rem;
						color: #9b9b9b;
						font-size: .26rem;
						line-height: .26rem;
					}
				}

				.section-body {
					margin: 0.16rem 0;

					.hot-model {
						overflow-x: auto;
						white-space: nowrap;
						padding: 0.6rem 0 0.6rem 0.32rem;
						margin: -0.6rem -0.32rem;

						.hot-model-item {
							display: inline-block;
							width: 2.42rem;
							padding: 0.32rem 0;
							margin-right: 0.32rem;
							text-align: center;
							background: #fff;
							border-radius: 0.16rem;
							box-shadow: 0 0 16px 2px rgba(0, 0, 0, .1);

							.img-box {
								width: 1.66rem;
								height: 1.66rem;
								margin: 0 auto;

								image {
									width: 1.66rem;
									height: 1.66rem;
								}
							}

							.name {
								color: #3c3c3c;
								font-size: .28rem;
								line-height: 3em;
								padding: 0 0.16rem;
							}

							.price {
								font-size: .32rem;
								color: #ff6700;
								position: relative;
								line-height: 1em;
							}

							.tag {
								margin-top: 0.16rem;
								display: inline-block;
								background: rgba(243, 182, 49, .27);
								border: 1px solid #f3b631;
								border-radius: 1.5em;
								line-height: 1.5em;
								padding: 0 0.1rem;
								color: #f3b631;
								font-size: .2rem;
								transform: scale(.8);
								-webkit-transform: scale(.8);
							}
						}
					}

					.step-box {
						text-align: center;

						.step-img {
							width: 4.12rem;
							margin: 0 auto;

							image {
								display: block;
								width: 100%;
							}
						}

						.ui-box {
							display: box;
							display: -webkit-box;
							box-align: center;
							-webkit-box-align: center;
							box-pack: center;
							-webkit-box-pack: center;
						}

						.step-text {
							font-size: .22rem;
							width: 5.2rem;
							margin: 0 auto;


							.ui-box-flex {
								width: 100%;
								font-size: .22rem;
								box-flex: 1;
								-webkit-box-flex: 1;
								line-height: 3em;
							}
						}
					}

					.advantage {
						margin-top: 0.4rem;
						padding-left: 0.6rem;
						text-align: left;

						.li {
							color: #9b9b9b;
							line-height: 2em;
							font-size: .22rem;
						}
					}
				}
			}
		}

		.action-bar {
			position: fixed;
			z-index: 99;
			width: 100%;
			bottom: 0;
			left: 0;

			.ui-button {
				display: block;
				background-color: #ff5722;
				text-align: center;
				height: 1rem;
				line-height: 1rem;
				border: 1px solid #ff5722;
				font-size: .3rem;
				color: #fff;

				text {}
			}
		}
	}
</style>